<!--
 * @Author: xiawang1024
 * @Date: 2023-04-10 10:25:02
 * @LastEditTime: 2023-04-10 11:57:46
 * @LastEditors: xiawang1024
 * @Description: 
 * @FilePath: /h5-single/src/index.html
 * 工作，生活，健康
-->
<!DOCTYPE html>
<html lang="zh-Hans" data-content-max>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="webkit" name="renderer">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">
    <title>Document</title>
    <link rel="shortcut icon" href="#" type="image/x-icon">
    <meta name="keywords" content="CSS">
    <meta name="description" content="">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/index.scss">
</head>

<body data-content-max>
    <header class="g-hd">
        <!-- 此处为固定宽高比示例 -->
        <div class="hd">
            <div class="hd-content">
                16 X 9
            </div>
        </div>

        <nav>
            <!-- 1px 单边框 -->
            <ul>
                <li>
                    <span class="icon">60 * 60</span>
                    <span class="text">导航入口</span>
                </li>
                <li>
                    <span class="icon">60 * 60</span>
                    <span class="text">导航入口</span>
                </li>
                <li>
                    <span class="icon f-border-radius">圆角</span>
                    <span class="f-border text">导航入口</span>
                </li>
            </ul>
        </nav>

    </header>
    <main class="g-mn">
        <!-- 1px 边框 -->
        <div class="single-line">1px line</div>
        <div class="mult-line">1px line</div>
        <!-- 文字溢出单行隐藏 -->
        <div class="text-overflow-single">
            单行省略 Pixels are the easiest unit to use (opinion). The only issue with them is that they don't let browsers
            change the default font size of 16. This script converts every px value to a rem from the properties you
            choose to allow the browser to set the font size.
        </div>
        <div class="text-overflow-mult">
            多行省略 Pixels are the easiest unit to use (opinion). The only issue with them is that they don't let browsers
            change the default font size of 16. This script converts every px value to a rem from the properties you
            choose to allow the browser to set the font size.
        </div>

    </main>
    <footer class="g-ft"></footer>
    <script type="module" src="./js/main.js"></script>
</body>

</html>